import { ref } from 'vue';
import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

const useTagsViewStore = defineStore('tagsView', () => {
  // const visitedViews = ref<TagView[]>([]);
  // const cachedViews = ref<string[]>([]);

  // 使用localStorage存储，保证页签在页面刷新后不丢失
  const visitedViews = useStorage<TagView[]>('visitedViews', []);
  const cachedViews = useStorage<string[]>('cachedViews', []);

  // 添加已访问视图到已访问视图列表中
  function addVisitedView(view: TagView) {
    // console.log('addVisitedView', visitedViews, view);
    // 如果已经存在于已访问的视图列表中，则不再添加
    if (visitedViews.value.some((v) => v.fullPath === view.fullPath)) return;
    // 如果视图是固定的（affix），则在已访问的视图列表的开头添加，否则在末尾添加
    if (view.affix) {
      visitedViews.value.unshift(view);
    } else {
      visitedViews.value.push(view);
    }
  }
  // 添加缓存视图到缓存视图列表中
  function addCachedView(view: TagView) {
    // console.log('addCachedView', visitedViews, view);
    // 如果缓存视图名称已经存在于缓存视图列表中，则不再添加
    if (cachedViews.value.includes(view.name)) return;
    // 如果视图需要缓存（cache），则将其路由名称添加到缓存视图列表中
    if (view.cache) {
      cachedViews.value.push(view.name);
    }
  }

  // 从已访问视图列表中删除指定的视图
  function delVisitedView(view: TagView) {
    for (const [i, v] of visitedViews.value.entries()) {
      // 找到与指定视图路径匹配的视图，在已访问视图列表中删除该视图
      if (v.path === view.path) {
        visitedViews.value.splice(i, 1);
        break;
      }
    }
  }
  // 从缓存视图列表中删除指定的视图
  function delCachedView(view: TagView) {
    const index = cachedViews.value.indexOf(view.name);
    index > -1 && cachedViews.value.splice(index, 1);
  }

  function delOtherVisitedView(view: TagView) {
    visitedViews.value = visitedViews.value.filter((v) => v.affix || v.path === view.path);
  }
  function delOtherCachedView(view: TagView) {
    const index = cachedViews.value.indexOf(view.name);
    if (index > -1) {
      cachedViews.value = cachedViews.value.slice(index, index + 1);
    } else {
      cachedViews.value = [];
    }
  }

  function delAllVisitedView() {
    // keep affix tags
    const affixTags = visitedViews.value.filter((tag) => tag.affix);
    visitedViews.value = affixTags;
  }
  function delAllCachedView() {
    cachedViews.value = [];
  }

  function updateVisitedView(view: TagView) {
    // console.log('updateVisitedView', visitedViews, view);
    for (let v of visitedViews.value) {
      if (v.path === view.path) {
        v = Object.assign(v, view);
        break;
      }
    }
  }

  function addView(view: TagView) {
    // console.log('addView', visitedViews, view);
    addVisitedView(view);
    addCachedView(view);
  }
  function delView(view: TagView) {
    // console.log('delView', visitedViews, view);
    delVisitedView(view);
    delCachedView(view);
  }

  function delOtherView(view: TagView) {
    delOtherVisitedView(view);
    delOtherCachedView(view);
  }

  function delLeftView(view: TagView) {
    const cindex = visitedViews.value.findIndex((v) => v.path === view.path);
    if (cindex === -1) return;
    visitedViews.value = visitedViews.value.filter((v, i) => {
      if (i >= cindex || v.affix) {
        return true;
      }
      const aindex = cachedViews.value.indexOf(v.name);
      aindex > -1 && cachedViews.value.splice(aindex, 1);
      return false;
    });
  }

  function delRightView(view: TagView) {
    const cindex = visitedViews.value.findIndex((v) => v.path === view.path);
    if (cindex === -1) return;
    visitedViews.value = visitedViews.value.filter((v, i) => i <= cindex || v.affix);
  }

  function delAllView() {
    delAllVisitedView();
    delAllCachedView();
  }

  return {
    visitedViews,
    cachedViews,
    addVisitedView,
    addCachedView,
    delVisitedView,
    delCachedView,
    delOtherVisitedView,
    delOtherCachedView,
    delAllVisitedView,
    delAllCachedView,
    updateVisitedView,
    addView,
    delView,
    delOtherView,
    delLeftView,
    delRightView,
    delAllView
  };
});

export { useTagsViewStore };
